<!-- 公共部分-搜索栏 -->
<template>
	<div>
		<van-nav-bar>
			<template #left>
				<router-link to="/city">城市</router-link>
			</template>

			<template #title>
				<!-- <router-link to="/search">搜索</router-link> -->
				<van-search shape="round" placeholder="请输入搜索关键词" />
			</template>

			<template #right>

				<van-image v-if="user.headerimg" :src="user.headerimg" type="contain" round width="40px" height="40px"
					@click="$router.push('/login')" />
				<router-link to="/login" v-else>登录</router-link>
				<div v-if="user.nick">{{user.nick}}</div>
			</template>
		</van-nav-bar>
	</div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
interface IUser {
	nick: string
	headerimg: string
}

const store = useUserStore()
const user: IUser = store.userInfo
</script>

<style lang="scss" scoped>
.van-nav-bar {
	font-weight: bold;
	background-color: #d30707;

	.van-nav-bar__left {
		a {
			color: white;
			font-size: 16px;
		}
	}

	:deep(.van-nav-bar__title) {
		height: 46px;
		line-height: 46px;
		border-radius: 30px;
		box-sizing: border-box;
		max-width: 60%;
		flex: 1;
		text-align: left;
		font-size: 15px;
		color: #232326;

		a {
			color: #232326;
			font-size: 16px;
		}

		.van-search {
			background-color: #d30707;
			border-radius: 30px;
			padding: 6px;

		}
	}

	.van-nav-bar__right {
		a {
			color: white;
			font-size: 16px;
		}
	}

	.van-image {
		margin-left: 5px;
	}
}
</style>